<template>
	<view class="content">
		<bgyx-nav-bar>
			<div slot="left">
				<image :src="`/static/images/link${$store.state.websocket.connectState ? 's' : 'f'}.png`"
					style="width: 60rpx;height: 60rpx;" mode=""></image>
			</div>
			<div slot="default">
				<b style="font-size: 32rpx;">视频会议室</b>
			</div>
			<view slot="right" style="display: flex;justify-content: flex-end;align-items: center;">

			</view>
		</bgyx-nav-bar>

		<view v-for="(item,k) in rooms" @click="gomtvideo(item)" :style="{'background': item.user_id == 0 ? 'linear-gradient(to right, #529ff9, #3dbeac)' : 'linear-gradient(to right, #f96363, #be9a17)'}" class="roomcss">
			<view style="display: flex;flex-direction: column;">
				<view style="font-weight: bold;font-size: 35rpx;">
					{{item.name}}
				</view>
				<view style="font-size: 28rpx;margin-top: 20rpx;">
					{{item.note}}
				</view>
				<view style="font-size: 20rpx;margin-top: 20rpx;">
					在线人数: {{item.users.length}}
				</view>
			</view>
			<image src="/static/images/icon_mtin.png" style="width: 120rpx;" mode="widthFix"></image>
		</view>

		<u-tabbar></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
import utils from '../../utils';
	export default {
		data() {
			return {}
		},
		onReady() {
			// 注意：需要在onReady中 或 onLoad 延时
			// this.context = uni.createLivePusherContext("livePusher", this);
		},
		computed: {
			...mapState({
				rooms: state => {
					return state.common.rooms
				}
			})
		},
		onShow() {
			if (this.rooms.length == 0) {
				this.$store.dispatch({
					type: "common/initRooms"
				})
			}
		},
		methods: {
			gomtvideo: async function(item) {
				const ret = await utils.checkPermission("请打开摄像头和麦克风权限")
				if(ret){
					uni.navigateTo({
						url: "/pages/meeting/mtvideo?id=" + this.$store.state.user.user.id +
							"&roomId=" + item.id + "&name=" + this.$store.state.user.user.name + "&mtname=" + item
							.name
					})
				}
			},
			statechange(e) {
				console.log("statechange:" + JSON.stringify(e));
			},
			netstatus(e) {
				console.log("netstatus:" + JSON.stringify(e));
			},
			error(e) {
				console.log("error:" + JSON.stringify(e));
			},
			start: function() {
				this.context.start({
					success: (a) => {
						console.log("livePusher.start:" + JSON.stringify(a));
					}
				});
			},
			close: function() {
				this.context.close({
					success: (a) => {
						console.log("livePusher.close:" + JSON.stringify(a));
					}
				});
			},
			snapshot: function() {
				this.context.snapshot({
					success: (e) => {
						console.log(JSON.stringify(e));
					}
				});
			},
			resume: function() {
				this.context.resume({
					success: (a) => {
						console.log("livePusher.resume:" + JSON.stringify(a));
					}
				});
			},
			pause: function() {
				this.context.pause({
					success: (a) => {
						console.log("livePusher.pause:" + JSON.stringify(a));
					}
				});
			},
			stop: function() {
				this.context.stop({
					success: (a) => {
						console.log(JSON.stringify(a));
					}
				});
			},
			switchCamera: function() {
				this.context.switchCamera({
					success: (a) => {
						console.log("livePusher.switchCamera:" + JSON.stringify(a));
					}
				});
			},
			startPreview: function() {
				this.context.startPreview({
					success: (a) => {
						console.log("livePusher.startPreview:" + JSON.stringify(a));
					}
				});
			},
			stopPreview: function() {
				this.context.stopPreview({
					success: (a) => {
						console.log("livePusher.stopPreview:" + JSON.stringify(a));
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.roomcss {
		display: flex;
		width: 100%;
		padding: 20rpx;
		justify-content: space-between;
		background: linear-gradient(to right, #529ff9, #3dbeac);
		border-radius: 16rpx;
		color: white;
		margin-bottom: 20rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}

	.button-demo {
		margin-top: 80rpx;
	}

	.link-demo {
		margin-top: 80rpx;
	}
</style>